<template>
	<view class="header">
		<view class="statusBarHeight" :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="header-box">
			<icon class="header-back" @click="back()"></icon>
			<view class="header-title">{{ title }}</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		title: {
			type: String,
			default: '0元购'
		}
	},
	data() {
		return {
			statusBarHeight: 0
		};
	},
	methods: {
		// 返回
		back() {
			const pages = getCurrentPages();
			if (pages.length === 1) {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			} else {
				uni.navigateBack();
			}
		}
	},
	mounted() {
		const res = uni.getSystemInfoSync();
		this.statusBarHeight = res.statusBarHeight;
	}
};
</script>

<style scoped lang="scss">
.header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	.header-box {
		height: 82rpx;
		position: relative;
		.header-back {
			width: 36rpx;
			height: 36rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/lh-pageindex-back.png) no-repeat;
			background-size: cover;
			position: absolute;
			left: 42rpx;
			top: 50%;
			transform: translateY(-50%);
		}
		.header-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #ffffff;
			text-align: center;
			height: 82rpx;
			line-height: 82rpx;
		}
	}
}
</style>
